import React from 'react';

const UseRefDemo = () => {
  const ref1 = React.useRef<HTMLDivElement>(null); //这种方式传创建的ref 是只能可读的一个属性 read-only

  const ref2 = React.useRef<HTMLDivElement | null>(null); // 这种方式创建的ref 是可以改变的 类似与下面的例子
  // ref 先被声明 然后ref.current的值被改变
  const ref = React.useRef(0);
  React.useEffect(() => {
    ref.current += 1;
  }, []);

  const valRef = React.useRef<number>(80); //使用 ref存值
  const [, setChange] = React.useState({}); //借助 useState更新值

  const onClickRef1 = () => {
    ref1.current?.focus();
    console.log(ref1.current?.focus);
  };

  // 两种创建的方式都是需要我们进行可选链的判断
  const onClickRef2 = () => {
    ref2.current?.focus();
    console.log(ref2.current); // ref2.current 就是当前的dom节点 输出结果  <div>useRef2</div>
    console.log(ref2.current?.focus);
  };

  /**
   *
   * 我们的 useRef 不仅是可以存储 dom结构 同时也是可以存储数据
   *
   * 还有一点 creactRef 是类组件的写法 而 useRef才是hooks组件的写法
   *
   */

  return (
    <>
      <div onClick={onClickRef1} ref={ref1}>
        useRef1
      </div>
      <div onClick={onClickRef2} ref={ref2}>
        useRef2
      </div>

      {/* 使用 ref存值  不借助useState 它是不会更新的*/}
      <div style={{padding: '10px 20px'}}>
        value: {valRef.current} --- 使用useRef存值 让useState更新
        <button
          onClick={() => {
            valRef.current += 1;
            setChange({});
          }}
        >
          +
        </button>
      </div>
    </>
  );
};

export default UseRefDemo;
